<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件代理事件委托</title>
  <script>
    window.onload = function () {
      // 获取元素节点
      var list = document.getElementById('list');
      var one = document.getElementById('one');
      var two = document.getElementById('two');
      var three = document.getElementById('three');
      // function handler1(){
      //   console.log(this.id);
      //   this.innerHTML='我是第一个孩子'
      // }
      // function handler2(){
      //   console.log(this.id);
      //   this.innerHTML='我是第二个孩子'
      // }
      // function handler3(){
      //   console.log(this.id);
      //   this.innerHTML='我是第三个孩子'
      // }
      // one.addEventListener('click',handler1,false);
      // two.addEventListener('click',handler2,false);
      // three.addEventListener('click',handler3,false);
      // switch (表达式/变量) {
      //     case 1:
      //       执行语句1
      //       break;
      //     case 2:
      //       执行语句2
      //       break;
      //     case 3:
      //       执行语句3
      //       break;
      //     default:
      //       执行语句
      //       break;
      //   }
      // 事件代理 事件委托 将本应该绑定给子元素的事件绑定给父元素
      list.onclick= function (event) {
        // 事件对象 
        // event.target.id innerHTML
        console.log(event);
        var target = event.target;
        switch (target.id) {
          case 'one':
            target.innerHTML = '我是第一个孩子';
            break;
          case 'two':
            target.innerHTML = '我是第二个孩子';
            break;
          case 'three':
            target.innerHTML = '我是第三个孩子';
            break;
        }
      }
    }
  </script>
</head>

<body>
  <ul id="list">
    <li id="one">one</li>
    <li id="two">two</li>
    <li id="three">three</li>
  </ul>
</body>

</html>